<template>
	<view style="padding-bottom: 50px;">
		<cu-custom :bgColor="'bg-' + theme.themeColor" :isBack="true">
			<block slot="content">{{pageDesign.pageName}}</block>
		</cu-custom>
		
		
		<view class="swiper-con">
			<!-- 轮播图区域 -->
				<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true" dots-styles="default">
				  <!-- 循环渲染轮播图的 item 项 -->
				  <swiper-item v-for="(item, i) in goodsList" :key="item.id">
					  <!-- 动态绑定图片的 src 属性 -->
						<image :src="item.src"></image>
				  </swiper-item>
				</swiper>
		</view>
		
		<view class="liren-dizhi">
			<view class="liren-left">
				<view class="liren-left-con">
					<!-- <view class="" @click="open"> -->
					<view class="liren-left-conT">
						<image class="liren-left-img" :src="dzImg" mode=""></image>
						<text class="textStyle">美诗国际  (望城总店)  </text>
						<image class="dh" :src="dhImg" mode=""  @click.stop.prevent="showFlag = true"  ></image>
					</view>
					<view class="liren-left-conB" @tap="open">
						<view style="display: flex;">
							<uni-icons type="location-filled" size="20" color="#ccc"></uni-icons>
							<text class="textStyle2">{{ address }}</text>
						</view>
						<view style="display: flex;flex-direction: column;">
							<text class="textStyle2">{{addressDetail}}</text>
						</view>
					</view>
				</view>
				<u-modal v-model="show" :content="content" :mask-close-able="true" :show-cancel-button="true"  @confirm="toGaode"> </u-modal>
			</view>
			
			<view class="liren-right">
				<view class="urate">
						<u-rate :disabled="true" v-model="value" active-color="#FF9090" inactive-color="#b2b2b2" ></u-rate>
				</view>
				<text>月售45646</text>
				<!-- <uni-icons type="forward" size="25" color="#2C2C2C"></uni-icons> -->
			</view>
			
		</view>
		<view class="xjc-con" v-for="item in goodList"  @tap="toRouter(item.id)">
			<view class="xjc-con-radiu">
				<view class="xjc-con-let">
					<image class="imgStyle" :src="item.spuUrls[0]" mode=""></image>
					<view class="xjc-con-title">
						<text class="xjc">{{ item.name }}</text>
						<text class="bzjg">标准价格  <text class="redjiage">￥{{ item.highPrice }}</text></text>
						<text class="yues188">月售{{item.salesVolume}}</text>
					</view>
				</view>
				<view class="xjc-con-right">
					<image class="image" :src="jiaImg" mode="" ></image>
					<!-- <uni-number-box :min="1" :max="99" :value="goods.goods_count" @change="numChangeHandler"></uni-number-box> -->
				</view>
			</view>
		</view>
		
	<view class="goods_nav"> 
	  <!-- fill 控制右侧按钮的样式 -->
	  <!-- options 左侧按钮的配置项 -->
	  <!-- buttonGroup 右侧按钮的配置项 -->
	  <!-- click 左侧按钮的点击事件处理函数 -->
	   <!--buttonClick 右侧按钮的点击事件处理函数-->
	 <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
	</view>
	
	<u-popup v-model="showFlag" mode="center" class="imgProp-con" border-radius="14" width="60%" height="120px" :closeable="true">
		<image class="image" :src="dhbgImg" mode=""></image>
		<view>15012919147</view>
	</u-popup>
	
	</view>
</template>

<script> 
    import config from 'config/env'
    import { getCount } from '@/api/shoppingcart.js'
	import { getBeauty } from '@/api/beauty.js'
	import {
		getPage } from '@/api/goodsspu.js'
	
	export default {
		data() {
			return {
				value: 4,
				showFlag: false,
		     	show: false,
		        content: '是否跳转高德地图',
				address:'长沙市望城区高塘岭街道92号',
				addressDetail:'(莲湖重建地16栋）二楼',
				page: {
					currentPage: 1,
					pageSize: 80,
					descs: 'create_time',
				},
				checkedAll: false, //是否全选
				shoppingCartList: [],
				goods:{
					goods_count : 1,
				},
				goodList:[],
				totalPrice: 0,
				effectiveGoodsIds: 0, //有效商品id
				total:'',
				show:false,
				theme: getApp().globalData.theme, //主题
				showDefultPage: false, // 是否显示默认样式
				pageDesign: {
					pageName: '丽人服务'
				},
				dzImg:`${config.imgSrcL}dp.png`,
				dhImg:`${config.imgSrcL}dh.png`,
				jiaImg:`${config.imgSrcL}jia.png`,
				dhbgImg:`${config.imgSrcL}dhbg.png`,
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				goodsList:[
					{
						id : 1,
						src : `${config.imgSrcL}banner.png`
					},{
						id : 2,
						src : `${config.imgSrcL}tyank.png`
					}
				],
				// 商品详情对象
				goods_info: {
					goods_stateAll : false,
					goods_state : false,
					goods_count:0,
					goods_price : 250,
					goods_small_logo : '',
					goods_name : '洗剪吹'
					
					
				},
				// 左侧按钮组的配置对象
				options: [{
				  icon: 'shop',
				  text: '店铺'
				}, {
				  icon: 'cart',
				  text: '购物袋',
				  info: 2
				}],
				// 右侧按钮组的配置对象
				buttonGroup: [
				  {
					text: '去购物车结算',
					backgroundColor: '#18b1bb',
					color: '#fff',
				  }
				]
			};
		},
		onShow() {
			// this.setBar()
			this.getCountNum()
		},
		onLoad(){
		  	this.getCountNum()
			this.getPageList()
		},
		methods : {
			//遮罩层
	     	open() {
				this.show = true;
			},
			//弹出层
			
			toGaode(){
				console.log('去高德')
				uni.getLocation({
				    type: 'wgs84',
				    success: function (res) {
				      const latitude = res.latitude; // 纬度
				      const longitude = res.longitude; // 经度
				      
				      // 使用获取到的经纬度跳转到高德地图
				      uni.openLocation({
				        latitude,
				        longitude,
				        scale: 18, // 地图缩放级别
				        name: '美诗国际  (望城总店)', // 目的地名称
				        address: '长沙市望城区高塘岭街道92(莲湖重建地16栋）二楼' ,// 目的地地址
						provider: 'amap' // 高德地图提供商
				      });
				    },
				    fail(err) {
				      console.error('获取位置失败：', err);
				    }
				  })
			},
			//购物车数量
			async getCountNum(){
					const { data } = await getCount()
					this.total = data
					console.log(this.total)
			},
			
			
			/**
			 * 数量修改
			 */
			async addCart(dataObj) {
				let datalist = {
					id: dataObj.id,
					quantity: 1
				}
				
				const { data } = await shoppingCartEdit(datalist)
				
				console.log(data)
			
			},
			//商品数据
			async getPageList (){
				
				const { data } = await getPage({
					current: '1',
					size: 10,
					descs: '',
					ascs: '',
					name: '',
					categorySecondId: '1498510397314220034'
				})
				
				this.goodList = data.records
				
				console.log(this.goodList)
				
			},
			numChangeHandler(val) {
			   console.log(val)
			},
			numChangeHandler(e){
				console.log(e)
			},
			change(e) {
					console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			// 左侧按钮的点击事件处理函数
			onClick(e) {
			  if (e.content.text === '购物袋') {
			    // 切换到购物车页面
			    uni.switchTab({
			      url: '/pages/shopping-cart/index'
			    })
				// this.$refs.popup.open()
				
			  }else{
				  console.log('店铺')
			  }
			},
			buttonClick(e){
				if (e.content.text === '加入购物车') {
				  // 切换到购物车页面
				  // uni.switchTab({
				  //   url: '/pages/cart/cart'
				  // })
								
						console.log(456)
								
				}else{
					// 切换到购物车页面
					uni.switchTab({
					  url: '/pages/shopping-cart/index'
					})
				}
			},
			toRouter(id){
				uni.navigateTo({
					url:`/subpkg/beauty/beautyDetails/beautyDetails?id=${id}`
					// url:`/pages/goods/goods-detail/index?id=${id}`
				})
			},
			
		},
		
		watch:{
			total: {
			   // handler 属性用来定义侦听器的 function 处理函数
			   handler(newVal) {
			      const findResult = this.options.find(x => x.text === '购物袋')
			      if (findResult) {
			         findResult.info = newVal
			      }
			   },
			   // immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
			   immediate: true
			}
		},
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f8f8f8;
	}
	::v-deep .uni-scroll-view, .uni-scroll-view-content{
		 //    display: flex !important;
		 //    flex-direction: column !important;
		 //    align-items: center !important;
			// justify-content: center !important;
	}
	.imgProp-con{
		display: flex;
		flex-direction: column;
		padding: 15px;
		text-align: center;
		align-items: center;
		justify-content: center;
		.image{
			width: 98rpx;
			height: 98rpx;
			margin-top: 20px;
			margin-bottom: 10px;
		}
	}
	::v-deep  .uni-numbox__value{
		background: #FFF1F1 !important;
	}
	::v-deep.uni-numbox-btns[data-v-15947278]{
		background-color: #fff;
	}
	.goods-ddfp{
		color: #B2B2B2;
		font-size: 25.78rpx;
	}
	.goods-item-right {
		  display: flex;
		  flex: 1;
		  flex-direction: column;
		  justify-content: space-between;
		
		  .goods-name {
		    font-size: 13px;
		  }
		
		  .goods-info-box {
		    display: flex;
		    align-items: center;
		    justify-content: space-between;
		  }
		
		  .goods-price {
		    font-size: 16px;
		    color: #c00000;
		  }
		}
		.goods-item-left {
		  margin-right: 10px;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
		
		  .goods-pic {
		    width: 100px;
		    height: 100px;
		    display: block;
			border-radius: 10px;
			margin-left: 10px;
		  }
		}
	.goods-item {
	  display: flex;
	  padding: 10px 5px;
	
	  .goods-item-left {
	    margin-right: 10px;
	
	    .goods-pic {
	      width: 130rpx;
	      height: 130rpx;
	      display: block;
		  border-radius: 2px;
	    }
	  }
	
	  .goods-item-right {
	    display: flex;
	    flex-direction: column;
	    justify-content: space-between;
			
	    .goods-name {
	      font-size: 28.12rpx;
		  color: #000000;
	    }
	
	    .goods-price {
	      font-size: 28.12rpx;
	      color: #FF0000;
		  font-weight: 400;
	    }
	  }
	}
	

.cart-title {
  background-color: #fff;
  position: sticky;
  top: 0;
  transition: top 0.2s ease-out;
  overflow-y: overlay;
  z-index: 9999;
  padding:0 15px;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 5px;
  border-bottom: 1px solid #efefef;
  justify-content: space-between;
  .cart-title-text {
    margin-left: 10px;
	color: #A1A1A1;
  }
}
.popup-content{
	max-height: 350px;
}
.goods-detail-container {
  // 给页面外层的容器，添加 50px 的内padding，
  // 防止页面内容被底部的商品导航组件遮盖
  padding-bottom: 50px;
}

.goods_nav {
  // 为商品导航组件添加固定定位
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.xjc-con{
	background: linear-gradient(90deg, #FFFFFF 0%, #FFEFEF 100%);
	padding: 25rpx;
	.xjc-con-radiu{
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 2px 2px 4px rgba(0, 0, 0, .1); 
		padding-right: 20px;
		border-radius: 25rpx;
	}
	.xjc-con-right{
		// margin-bottom: -66rpx;
		.image{
			width: 77.34rpx;
			height: 77.34rpx;
		}
	}
	.xjc-con-let{
		display: flex;
		.xjc-con-title{
			display: flex;
			flex-direction: column;
			margin-left: 15px;
			.xjc{
				color: #000000;
				font-size: 30.47rpx;
				margin-top: 15rpx;
			}
			.bzjg{
				color: #000000;
				font-size: 28.12rpx;
				margin-top: 10px;
				.redjiage{
					color:#FF0000;
					font-size: 28.12rpx;
					margin-top: 15px;
				}
				
			}
			.yues188{
				font-size: 23.44rpx;
				color: #A1A1A1;
				margin-top: 15px;
			}
		}
		.imgStyle{
			width: 281.25rpx;
			height:100px;
			border-radius: 25rpx 0rpx 0rpx 25rpx;
		}
	}
}
.liren-left-conT{
	display: flex;
	align-items: center;
}
.liren-left-conB{
	display: flex;
	align-items: center;
	margin-top: 10px;
	flex-direction: column;
}
.liren-dizhi{
	display: flex;
	justify-content: space-between;
	padding-top: 10px;
	padding-bottom: 10px;
	background-color: #fff;
	.liren-left{
	
    	display: flex;
		
	}
	.liren-right{
		display: flex;
		align-items: center;
		color: #B2B2B2;
		font-size: 23.44rpx;
		margin-right: 10px;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-around;
		.urate{
			margin-bottom: 10px;
		}
	}
	.liren-left-con{
		margin-left: 10px;
		display: flex;
		flex-direction: column;
		.textStyle{
			font-size:30rpx;
			color: #000000;
			font-weight: 400;
			letter-spacing: .5px;
			margin-left: 5px;
		}
		.textStyle2{
			color: #B2B2B2;
			font-size: 26rpx;
			letter-spacing: .5px;
		}
	}
	.liren-left-img{
		width: 37.5rpx;
		height: 37.5rpx;
	}
	.dh{
		width: 19px;
		margin-left: 10px;
		height: 22px;
		transform: rotate(-10deg);
		
	}
}

swiper {
 height: 330rpx;

 .swiper-item,
 image {
   width: 100%;
   height: 100%;
 }
}
</style>
